
import React, { useMemo, Fragment, useRef, useState, useEffect } from 'react';
import classNames from 'classnames';
import TimeLine from '@components/time_line'
import {useSelector} from 'react-redux';
import {isDomActive} from '@tools/utils'
import {useTranslation} from 'react-i18next';
import work_experience from '../json/work_experience'
import * as styles from '../styles/job_section_3.less';


function JobSection3() {
  const {t} = useTranslation();
  const {language} = useSelector(state => state.global);
  const refDom = useRef();
  const [active, setActive] = useState(false);
  useEffect(() => {
      let isActive = isDomActive(refDom)
      setActive(isActive)
  })
  const experience_arr = useMemo(() => {
    let arr = work_experience();
    return arr.map((item, index) => {
      let new_jsx = [];
      for (const key in item) {
        new_jsx.push(<p key={index}>{`${key}：${item[key]}`}</p>)
      }
      return {
        childrens: <Fragment key={index}>
          {new_jsx}
        </Fragment>
      }
    })
  }, [language])
    return  <div ref={refDom} className={classNames(styles.job_section, 'section')}>
      <div className={classNames(styles.experience, active ? styles.experience_open : '')}>
          <span>{t('work')}</span>
          <span>{t('experience')}</span>
      </div>
      <div className={styles.time_line}>
        <TimeLine
            items={experience_arr}
        />
      </div>
     
  </div>
}

export default JobSection3;
